<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
			window.onload = function(){
				//lineWidth线条的宽度
				//lineCap线条两端的形状
				//默认butt(无) round  square
			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
			 
	 var context = canvas.getContext("2d");//2d环境
	 context.lineWidth=10;//线条的宽度
	 context.strokeStyle="blue";//线的颜色
	 context.fillStyle="red";//填充色
	 //开始
//	 context.beginPath();
//	 //绘制点
//	  for(var i=0; i<5; i++){
// 	      context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
// 								 -Math.sin((18+i*72)/180*Math.PI)*300+400);
//  	context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
// 								 -Math.sin((54+i*72)/180*Math.PI)*150+400);
// }
//	 //结束
//	 context.closePath();
//	context.fill();
//  context.stroke();
    
   drawStar(context, 150, 300, 400, 400,30);//可控制  
function drawStar(cxt,r,R,x,y,rot){   //(环境，小圆半径，大圆半径，偏移量x,偏移量y， 旋转度)
	cxt.beginPath();
	for(var i=0; i<5; i++){//计算5个点
		cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
									 -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
	 	cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
									 -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
	}
	cxt.closePath();
	context.fill();
	cxt.stroke();
}
    /*
     	function starPath(cxt){   //在 0 0 位置会出一个没有偏移没有旋转角的标准五角星
		cxt.beginPath();
		for(var i=0; i<5; i++){
			cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
										 -Math.sin((18+i*72)/180*Math.PI));
		 	cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
										 -Math.sin((54+i*72)/180*Math.PI)*0.5);
		}
		}
      */
    
		}
	</script>
</html>
